<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2021-05-30 20:19:40
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2023-03-05 09:35:55
 * @FilePath: \vue-openlayers\src\views\map\map1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="container">
    <h3 class="h3">加载百度地图</h3>
    <div id="vue-openlayers" />
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Tile } from 'ol/layer'
import { TileImage } from 'ol/source'
import TileGrid from 'ol/tilegrid/TileGrid'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initmap()
  },
  methods: {
    initmap() {
      const resolutions = []
      let baiduX, baiduY

      for (let i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i)
      }
      const tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions
      })

      const baidu_source = new TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord) {
          if (!tileCoord) {
            return ''
          }
          const z = tileCoord[0]
          const x = tileCoord[1]
          const y = tileCoord[2]
          // 对编号xy处理
          baiduX = (x < 0) ? x : 'M' + (-x)
          baiduY = -y
          return 'http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20151021&scaler=1&p=1'
        }
      })

      const baidu_layer = new Tile({
        source: baidu_source
      })

      // eslint-disable-next-line no-unused-vars
      const map = new Map({
        target: 'vue-openlayers',
        layers: [baidu_layer],
        view: new View({
          // projection: 'EPSG:3857',
          // center: [13531290.967373039, 4675318.865056401],
          projection: 'EPSG:4326',
          center: [114.348441, 30.5516],
          zoom: 12
        })
      })
    }
  }
}
</script>
<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
</style>

